<template>
	<div class="el-select">
		<input class="el-input__inner" type="text" v-model="label" :placeholder="placeholder"
			:style="{borderColor: active?'#409eff':'#dcdfe6'}" @focus="_focus" @blur="_blur" @input="_input" />
	</div>
</template>

<script>
	export default {
		name: 'input-option',
		props: {
			value: {
				type: String,
			},
			placeholder: {
				type: String,
				required: false,
				default: '请输入'
			},
		},
		model: {
			prop: 'value',
			event: 'input'
		},
		data() {
			return {
				label: null,
				active: false
			}
		},
		created() {
			this.init()
		},
		methods: {
			init() {
				this.label = this.value
			},
			_focus() {
				this.active = true
				this.$emit('focus')
			},
			_blur() {
				this.active = false
				this.$emit('blur')
			},
			_input(event) {
				let val = event.target.value;
				if (val != "") {
					this.label = val
				} else {
					this.label = null
				}
				this.$emit('input', this.label)
				this.$emit('change', this.label)
			}
		}
	}
</script>

<style scoped lang="scss">
	.el-select {
		position: relative;
		display: inline-block;
		width: 100%;
	}

	.el-input__inner {
		-webkit-appearance: none;
		background-color: #fff;
		background-image: none;
		border-radius: 4px;
		border: 1px solid #dcdfe6;
		box-sizing: border-box;
		color: #606266;
		display: inline-block;
		font-size: inherit;
		height: 32px;
		line-height: 32px;
		outline: none;
		padding: 0 15px;
		transition: border-color .2s cubic-bezier(.645, .045, .355, 1);
		width: 100%;
	}

	.el-scrollbar_view {
		overflow-y: auto;
		overflow-x: hidden;

		&::-webkit-scrollbar {
			width: 4px;
		}

		&::-webkit-scrollbar-thumb {
			border-radius: 2px;
			background: rgba(0, 0, 0, 0.1);
		}
	}

	.el-select-dropdown {
		position: absolute;
		top: 16px;
		z-index: 1024;
		width: 100%;
		max-height: 160px;
		border: 1px solid #e4e7ed;
		border-radius: 4px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		box-sizing: border-box;
		margin: 20px 0 10px 0;

		.el-select-dropdown_list {

			.activeText {
				color: #409eff;
			}

			.el-select-dropdown_item {
				font-size: 14px;
				padding: 0 20px;
				position: relative;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
				color: #606266;
				height: 34px;
				line-height: 34px;
				box-sizing: border-box;
				cursor: pointer;

				&:hover {
					background-color: #f5f7fa;
				}
			}
		}
	}

	.dropdown-enter-from,
	.dropdown-leave-from {
		transform: translateY(-120px);
	}

	.dropdown-enter-active,
	.dropdown-leave-active {
		transition: all 0.28s;
	}

	.dropdown-enter-to {
		transform: translateY(0px);
	}

	.dropdown-leave-to {
		transform: translateY(0px);
	}
</style>
